
<template>
  <div>
    <!-- 顶部 -->
    <div class="topArea" style="margin-bottom: 2mm">
      <el-button type="primary" @click="addData">新增</el-button>
      <el-button
        type="danger"
        @click="muldeleteData(mydata)"
        :disabled="multipleSelection.length <= 0"
        >批量删除</el-button
      >
    </div>

    <!-- 表格内容 -->
    <div class="content">
      <el-table
        ref="multipleTable"
        :data="classificationData"
        tooltip-effect="dark"
        style="width: 100%;font-size: 15px;"
        @selection-change="handleSelectionChange"
        border
        设置表头背景颜色
        :header-cell-style="{color: '#C8D6F1', fontSize: '18px', height:'64px',  background: '#3F607F'}"

      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <!-- 序号 -->
        <el-table-column label="序号" align="center" prop="no">
        </el-table-column>
        <!-- 分类名称 -->
        <el-table-column prop="name" label="分类名称" align="center">
        </el-table-column>
        <!-- 分类简介 -->
        <el-table-column
          prop="description"
          label="分类简介"
          align="center"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            
            <el-button type="info" plain @click="updataData(scope.row)" >更新</el-button>
            <el-button type="danger" plain @click="deleteData(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="DialogVisible"
      width="60%"
      center
      v-if="DialogVisible"
    >
      <el-form
        :model="InfForm"
        :rules="hosRules"
        ref="InfForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 名称 -->
        <el-form-item label="名称" prop="name">
          <el-input v-model="InfForm.name"></el-input>
        </el-form-item>
        <!-- 介绍 文本域-->
        <el-form-item label="介绍" prop="introduce">
          <el-input type="textarea" v-model="InfForm.description"></el-input>
        </el-form-item>

        <!-- 序号 -->
        <el-form-item label="序号" prop="no">
          <el-input v-model="InfForm.no"  onkeyup="this.value=this.value.replace(/\D/g,'')"
        onafterpaste="this.value=this.value.replace(/\D/g,'')"></el-input>
          
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="DialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitHandle('InfForm')"
          >提交</el-button
        >
      </span>
    </el-dialog>
    
  </div>
</template>

<script>
// 引入axios
import { get, post } from "@/utils/request";
export default {
  data() {
    return {
      multipleSelection: [], //被选中的记录数据-----对应“批量删除”传的参数值
      temporary: [], //批量删除id
      mydata:[],//参数数组

      // 咨询分类数据
      classificationData: [],

      DialogVisible: false,
      dialogTitle: "",
      // 要提交的表单对象
      InfForm: {},

      hosRules: {
        // 声明要验证的属性
        // 名称
        // trigger点击后字符串为空即提示
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        // 序号
        no: [{ required: true, message: "请选择序号", trigger: "blur" }],
      },
    };
  },
  created() {
    this.informationData();

  },
  methods: {
    muldeleteData(mydata) {
      this.$confirm("此操作将永久删除所选数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          post("/category/batchDelete",mydata).then((res) => {
            this.$message({
              type: "success",
              message: res.message,
            });
            this.informationData();
            this.DialogVisible=false
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async informationData() {
      let res = await get("/category/findAll");
      this.classificationData = res.data;
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
      let data = [];
      val.forEach((item) => data.push(item.id));
      this.temporary = data;
      console.log(this.temporary.toString());
      this.mydata.ids=this.temporary.toString()
    },
    addData() {
      (this.DialogVisible = true), (this.dialogTitle = "录入分类信息");
      this.DialogVisible = true;
      this.InfForm = {};
    },
    // 更新数据
    updataData(row) {
      // 修改对话框的标题
      this.dialogTitle = "修改咨询分类信息";
      this.DialogVisible = true;
      // 浅拷贝
      this.InfForm = { ...row };
    },


    // 提交数据
    submitHandle(FormName) {
      this.$refs[FormName].validate((valid) => {
        if (valid) {
          
          // 设置参数
          let data = { ...this.InfForm };
          // 发送网络请求
          post("/category/saveOrUpdate", data).then((res) => {
            this.$message({
              message: res.message,
              type: "success",
              
            });
            

            // 刷新数据
            this. informationData() 
            // 清空表单数据
            this.InfForm = {};
            // 关闭对话框
            this.DialogVisible = false;
          });
        } else {
          console.log("提交失败!!");
          return false;
        }
      });
    },
    // 删除数据
    deleteData(ID) {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          get("/category/deleteById", { id: ID }).then((res) => {
            this.$message({
              type: "success",
              message: res.message,
            });
            this.informationData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped>

</style>
